<template>
	<view class="lease-return-detail">
		<!-- 状态 -->
		<view class="header">
			<view class="row">
				<u-icon name="clock-fill" size="46" />
				<text class="lg ml10">{{ statusMap[orderStatus].name }}</text>
			</view>
			<view class="sm mt20">{{ statusMap[orderStatus].hint }}</view>
		</view>
		
		
		<view class="main">
			<!-- 商品 -->
			<view class="container goods">
				<view class="goods-title">商品信息</view>
				<lease-order-goods :image="goodsInfo.image">
				    <template #name>{{ goodsInfo.goods_name }}</template>
				    <template #specs>
				        {{ goodsInfo.spec_value_str }}，
				        {{ goodsInfo.periods }}{{ getPeriodsUnit(goodsInfo.periods_attribute) }}
				    </template>
				    <template #price>
				        <price 
						  :content="priceDayRent" 
						  mainSize="38rpx" 
						  minorSize="24rpx" 
						  color="#333333" 
						  :isPrefix="true" 
						  :isSuffix="true" 
						/>
				        <text>（x{{ goodsInfo.periods }}期）</text>
				    </template>
				</lease-order-goods>
			</view>
			
			<!-- 资金明细 -->
			<template v-if="amountInfo">
				<view class="container nr normal">
					<view class="row-between">
						<view @tap="goBill">
							<text>已还账单金额</text>
							<u-icon class="ml5" name="question-circle" color="#999999" />
						</view>
						<view>¥{{ amountInfo.periodization_pay_amount }}</view>
					</view>
					<view class="row-between mt10">
						<view @tap="isShowFalsifyPriceModal = true">
							<text>违约金</text>
							<u-icon class="ml5" name="question-circle" color="#999999" />
						</view>
						<view class="ornament">¥{{ amountInfo.falsify_price }}</view>
					</view>
				</view>
			</template>
			
			<!-- 寄件地址 -->
			<template v-if="addressInfo">
				<view class="container address">
					<view class="address-title">寄件地址</view>
					<view class="address-content">
						<view class="address-contact">
							<text>{{ addressInfo.consignee }}</text>
							<text class="ml10">{{ addressInfo.telephone }}</text>
						</view>
						<view class="address-site">{{ addressInfo.address }}</view>
					</view>
				</view>				
			</template>
			
			<!-- 收件地址 -->
			<view class="container address"> 
			    <view class="address-title">收件地址</view>
				<view class="address-content">
					<view class="address-contact">
						<text>{{ receivingAddress.platform_name }}</text>
						<text class="ml10">{{ receivingAddress.platform_mobile }}</text>
					</view>
					<view class="address-site">{{ receivingAddress.platform_address }}</view>
				</view>
			</view>
			
			<!-- 订单信息 -->
			<view class="container">
				<!-- 付款方式 -->
				<view class="info-item">
					<view class="info-item-label">付款方式</view>
					<view class="info-item-content">{{ getPayWayName(orderInfo.pay_way) }}</view>
				</view>
				<!-- 订单编号 -->
				<view class="info-item">
					<view class="info-item-label">订单编号</view>
					<view class="info-item-content">{{ orderInfo.order_sn }}</view>
				</view>
				<!-- 下单时间 -->
				<view class="info-item">
					<view class="info-item-label">下单时间</view>
					<view class="info-item-content">{{ orderInfo.create_time }}</view>
				</view>
				<!-- 快递单号 -->
				<template v-if="expressInfo">
					<view class="info-item">
						<view class="info-item-label">快递单号</view>
						<view class="info-item-content">
							<view>{{ expressInfo.express_name }}</view>
							<view @tap="copyText(expressInfo.express_sn)">
								<text>{{ expressInfo.express_sn }}</text>
								<u-icon class="ml10" name="file-text" />
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
		
		<!-- Fixed -->
		<view class="fixed" v-if="orderStatus == 1 || orderStatus == 2">
			<template v-if="orderStatus == 1">
				<view class="button--express" @tap="goEditExpress">填写单号</view>
			</template>
			<template v-if="orderStatus == 2">
				<view class="button--express" @tap="goExpressProgress">查看物流</view>
			</template>
		</view>		
		
		
		<!-- 违约金 说明 -->
		<u-modal v-model="isShowFalsifyPriceModal" title="说明" confirm-text="我知道了">
			<view class="desc-container">
				<text class="desc-title">违约金：</text>
				<text>您当前租期未到期，提前还机需支付相应的违约金</text>
			</view>
		</u-modal>
	</view>
</template>


<script>
	import { leaseReturnDetail } from '@/api/lease';
	import { copy } from '@/utils/tools'
	
	export default {
		data() {
			return {
				addressInfo: {},			// 寄件地址
				receivingAddress: {},		// 收件地址
				goodsInfo: {},				// 商品信息
				orderID: '',				// 租赁订单ID
				orderInfo: {},				// 订单信息
				amountInfo: {},				// 支付金额信息
				expressInfo: {},			// 快递信息
				priceDayRent: 0,			// 每日租赁价格
				orderStatus: 0,				// 订单状态
				
				statusMap: {
					0: {
						name: '未还机',
						hint: ''
					},
					1: {
						name: '待寄出',
						hint: '订单已提交，请及时寄出商品'
					},
					2: {
						name: '等待返款',
						hint: '商品已寄出，等待商家返款'
					},
					3: {
						name: '已完成',
						hint: '还机完成'
					}
				},
				
				isShowFalsifyPriceModal: false,	// 违约金Modal
			}
		},
		
		methods: {
			// 输出分期单位
			getPeriodsUnit(value) {
			    switch(value) {
			        case 'is_week': return '周';
			        case 'is_month': return '个月';
			    }
			},
			
			// 支付名称
			getPayWayName(payway) {
				switch(payway) {
					// 微信支付
					case 1: return '微信支付';
					// 支付宝支付
					case 2: return '支付宝支付';
					// 余额支付
					case 3: return '余额支付';
				}
			},
			
			// 填写物流信息
			goEditExpress() {
				uni.navigateTo({
					url: `/bundle/pages/lease_return_express/lease_return_express?id=${this.orderID}`
				})
			},
			
			// 查看物流进度
			goExpressProgress() {
				uni.navigateTo({
					url: `/bundle/pages/lease_return_express_progress/lease_return_express_progress?id=${this.orderID}`
				})
			},
			
			// 复制文本
			copyText(value) {
				copy(value)
			},
			
			// 跳转到账单页面
			goBill() {
				uni.navigateTo({
					url: '/bundle/pages/lease_bill/lease_bill?id=' + this.orderID
				})
			}
		},
		
		onLoad(options) {
			const id = options.id;
			this.orderID = id		
		},
		
		onShow() {
			leaseReturnDetail({ id: this.orderID }).then(res => {
				if (res.code != 1) return;
				const data = res.data;
				
				this.addressInfo = data.address_info || null;
				this.receivingAddress = data.receiving_address;
				this.goodsInfo = data.goods_info;
				this.orderInfo = data.order_info;
				this.orderStatus = data.order_info.return_status;
				this.amountInfo = data.amount_info || null;
				this.expressInfo = data.express_info || null;
				
				switch(this.goodsInfo.periods_attribute) {
					case 'is_week':
						this.priceDayRent = (this.goodsInfo.issue_rent / 7).toString().match(/^\d+(?:\.\d{0,2})?/);
						break;
					case 'is_month': 
						this.priceDayRent = (this.goodsInfo.issue_rent / 30).toString().match(/^\d+(?:\.\d{0,2})?/);
						break;
				}
				
			});
		}
	}
</script>


<style scoped>
	.container {
		margin-top: 20rpx;
		padding: 20rpx;
		border-radius: 7px;
		background-color: #FFFFFF;
	}
	
	.lease-return-detail {
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}
	
	.header {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 200rpx;
		padding: 0 50rpx;
		background-image: linear-gradient(90deg, #FF4D40, #3187FD);
		color: #FFFFFF;
	}
	
	.main {
		padding: 20rpx;
	}
	
	.goods-title {
		margin-bottom: 10rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}
	
	.address {
		display: flex;
	}
	
	.address-title {
		min-width: 146rpx;
		font-size: 28rpx;
		color: #999999;
	}
	
	.address-contact {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
	}
	
	.address-site {
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #666666;
	}
	
	.info-item {
		display: flex;
	}
	
	.info-item:nth-child(n+2) {
		margin-top: 20rpx;
	}
	
	.info-item-label {
		min-width: 146rpx;
		font-size: 28rpx;
		color: #999999;
	}
	
	.fixed {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		height: 100rpx;
		padding: 0 20rpx;
		border-radius: 5px 5px 0 0;
		background-color: #FFFFFF;
	}
	
	.button--express {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 188rpx;
		height: 68rpx;
		border: 1px solid #FF4D40;
		border-radius: 50px;
		margin-left: auto;
		font-size: 28rpx;
		color: #FF4D40;
	}
	
	.desc-container {
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		color: #333333;
	}
	
	.desc-title {
		font-weight: 500;
		margin-right: 10rpx;
	}
</style>
